<template>
	<view class="container">
		<view class="head">
			<view class="head-top">
				<u-avatar :src="src"></u-avatar>
				<view style="margin-left: 30rpx;">1</view>
			</view>
			<view class="head-txt">
				<view class="head-txt-item">学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:1</view>
				<view class="head-txt-item">
					年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;级:1</view>
				<view class="head-txt-item">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:1</view>
				<view class="head-txt-item">生&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日:1</view>
				<view class="head-txt-item">入学时间:1</view>
				<view class="head-txt-item" style="margin-bottom: 0rpx;">学校名称:1</view>
			</view>
		</view>
		<view class="date">
			<view class="">1</view>
			<view class="date-btn">
				<view class="date-btn-left">待缴</view>
				<view class="date-btn-right">其他</view>
			</view>
		</view>
		<view class="card">
			<view class="card-top">
				<view style="display: flex;align-items: center;">
					<u-icon name="rmb-circle-fill" size="24"></u-icon>
					<text style="margin-left: 5rpx;">学生餐标</text>
				</view>
				<text style="margin-left: 5rpx;">1元</text>
			</view>
			<u--form labelPosition="left" :model="uForm" ref="uForm" labelWidth='90'>
				<u-form-item label="归属月:">
					<text>1</text>
				</u-form-item>
				<u-form-item label="费用周期:">
					<text>当月天数</text>
				</u-form-item>
				<u-form-item label="周期数量:" >
					<text>1</text>
				</u-form-item>
				<u-form-item label="考勤:" >
					<text>1天</text>
				</u-form-item>
				<u-form-item label="实收:" >
					<text style="color: red;">￥1元</text>
				</u-form-item>
				<u-form-item label="备注:" >
					<u--input v-model="uForm.description"  placeholder="请输入"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="btn">
			<view class="">
				<text>合计:</text>
				<text style="color: red;">1元</text>
			</view>
			<view class="">
				<u-button type="primary" text="立即支付" @click="submit" size="small" style="width: 250rpx;height: 70rpx;" v-if="orderObj.is_done==0"></u-button>
				<u-button type="primary" text="返回首页" @click="goBack" size="small" style="width: 250rpx;height: 70rpx;" v-else></u-button>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		orderinfo,
		orderpay,
		description
	} from '@/api/order.js'
	import {
		studentinfo,
	} from '@/api/student.js'
	export default {
		data() {
			return {
				src: 'https://jiaofei-1259503077.cos.ap-beijing.myqcloud.com/1.png',
				uForm: {
					name: '',
				},
				obj: {},
				orderObj: {},
				id:''
			}
		},
		onLoad(e) {
			this.id=e.id
			// this.orderinfo(this.id)
		},
		methods: {
			goBack(){
				uni.reLaunch({
					url: "/pages/index/index"
				})
			},
			strFormat(str) {
				if (str != undefined) return str.slice(0, 7)

			},
			//备注
			async description(student_id) {
				let res = await description({
					id:this.id,
					description:this.uForm.description
				})
				if (res.code == 200) {
				} else {
					uni.$u.toast(res.msg);
				}
			
			},
			//获取已绑定学生信息
			async info(student_id) {
				let res = await studentinfo({
					student_id
				})
				if (res.code == 200) {
					this.obj = res.data
				} else {
					uni.$u.toast(res.msg);
				}

			},
			//获取订单详情
			async orderinfo(id) {
				let res = await orderinfo({
					id
				})
				if (res.code == 200) {
					this.orderObj = res.data
					this.info(res.data.student_id)
				} else {
					uni.$u.toast(res.msg);
				}
			},
			//立即支付
			async submit() {
				let res = await orderpay({
					order_code:this.orderObj.order_code
				})
				if (res.code == 200) {
					this.description()
					this.handlePay(res.data)
				} else {
					uni.$u.toast(res.msg);
				}
			},
			//支付方法
			handlePay(payInfo) {
				let that = this
				const jweixin = require("jweixin-module")
				//下面就是使用这个依赖包了，具体配置什么意思网上复制来的，一查一大堆
				jweixin.config({ //初始化配置
					debug: false, // 是否开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					appId: payInfo.appId, // 必填，公众号的唯一标识
					timestamp: payInfo.timeStamp, // 必填，生成签名的时间戳
					nonceStr: payInfo.nonceStr, // 必填，生成签名的随机串
					signature: payInfo.paySign, // 必填，签名，
					jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
				});
				jweixin.ready(function() {
					jweixin.chooseWXPay({ //下面这些参数都是在上面接口返回给我的
						timestamp: payInfo.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
						nonceStr: payInfo.nonceStr, // 支付签名随机串，不长于 32 位
						package: payInfo.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
						signType: payInfo.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
						paySign: payInfo.paySign, // 支付签名
						success: function(res) {
							console.log(res)
							uni.$u.toast('支付成功');
							that.orderinfo(this.id)

						},
						cancel: function(r) {},
						fail: function(res) {
							console.log(res)
							uni.$u.toast('支付失败');
						}
					});
				});
				jweixin.error(function(res) {
					console.log(res)
					uni.$u.toast('支付失败');
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100vw;
		height: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;

		.date {
			margin: 50rpx auto;
			width: 90%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.date-btn {
				width: 250rpx;
				height: 50rpx;
				display: flex;

				.date-btn-left {
					flex: 1;
					border-top-left-radius: 50rpx;
					border-bottom-left-radius: 50rpx;
					background-color: #449bed;
					line-height: 50rpx;
					text-align: center;
				}

				.date-btn-right {
					flex: 1;
					border-top-right-radius: 50rpx;
					border-bottom-right-radius: 50rpx;
					background-color: #d8d8d8;
					line-height: 50rpx;
					text-align: center;
				}
			}
		}

		.btn {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 100rpx;
			// position: fixed;
			// bottom: 40rpx;
			// padding-right: 40rpx;
			// box-sizing: border-box;

		}

		.card {
			width: 100%;
			padding: 40rpx;
			box-sizing: border-box;
			box-shadow: 5rpx 5rpx 10rpx 1px rgba(0, 0, 0, 0.3);
			background-color: #fff;
			border-radius: 20rpx;

			.card-top {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;
			}
		}

		.head {
			width: 100%;
			border-radius: 20rpx;
			box-shadow: 5rpx 5rpx 10rpx 1px rgba(0, 0, 0, 0.3);

			.head-txt {
				width: 100%;
				padding: 40rpx;
				box-sizing: border-box;
				background-color: #fff;
				border-bottom-left-radius: 20rpx;
				border-bottom-right-radius: 20rpx;

				.head-txt-item {
					margin-bottom: 20rpx;
					color: #515151;
					font-weight: 600;
				}
			}

			.head-top {
				width: 100%;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
				height: 100rpx;
				background-color: #449bed;
				display: flex;
				align-items: center;
				padding: 0 40rpx;
				box-sizing: border-box;
				color: #fff;
				font-weight: bold;
			}
		}
	}
</style>